<template>
  <div class="deep-menu-wrap">
    <!-- 套个div为了排序 -->
    <div v-for="item in props.data" :key="item.id">
      <el-sub-menu :index="item.id" v-if="item.children">
        <template #title>
          <span>{{ item.label }}</span>
        </template>
        <template v-if="item.children">
          <DeepMenu :data="item.children"/>
        </template>
      </el-sub-menu>

      <el-menu-item :index="item.id" v-else @click="jumpRouter(item)">
        <template #title>{{ item.label }}</template>
      </el-menu-item>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DeepMenu'
}
</script>

<!-- 深层菜单递归组件 -->
<script setup>
import bus from '@/utils/bus'
let props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
})

// 通信到 Layout/components/AsideComponents/Menu.vue
const jumpRouter = val => bus.emit('jump', val)
</script>

<style lang="scss" scoped>
.deep-menu-wrap {
  
:deep(.el-sub-menu) {
  .el-sub-menu__title {
      color: var(--text-color) !important;
      &:hover {
        color: #fff !important;
        background-color: var(--menu-bg-hover) !important;
      }
    }
  }
  .el-menu-item {
    color: var(--text-color) !important;
    &:hover {
      color: #fff !important;
      background-color: var(--menu-bg-hover) !important;
    }
  }
  .el-menu-item.is-active {
    border: 1px solid #0078D4;
    background-color: var(--menu-bg-hover) !important;
    color:#fff !important;
  }
}
:deep(.el-sub-menu) {
  .el-menu {
    background-color: transparent !important;
  }
}

</style>